<template>
  <custom-container class="sub-member">
    <custom-container-header no-spacing>
      <el-form :model="filters" ref="form" :disabled="loading"
               inline size="medium"
               @submit.native.prevent="getAll"
      >
        <el-form-item label="查询时间:">
          <!--<el-date-picker-->
            <!--v-model="filters.date"-->
            <!--type="daterange"-->
            <!--start-placeholder="开始日期"-->
            <!--end-placeholder="结束日期"-->
            <!--:picker-options="{disabledDate: beforeToday.disabledDate, shortcuts: pickerWeekStep.shortcuts}"-->
            <!--value-format="timestamp"-->
            <!--:default-time="['00:00:00', '23:59:59']"-->
            <!--&gt;-->
          <!--</el-date-picker>-->
          <el-date-picker
            v-model="filters.date"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="{disabledDate: beforeToday.disabledDate, shortcuts: pickerWeekStep.shortcuts}"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="代理账户:">
          <el-input v-model="filters.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属上级:">
          <el-input v-model="filters.parentName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="代理层级:">
          <el-select v-model="filters.level">
            <el-option
              v-for="item in consts.PROXY_LEVEL"
              :label="item.title"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">查询</el-button>
        </el-form-item>
      </el-form>
    </custom-container-header>
    <custom-container-body>
      <el-table :data="tableData.list" :loading="loading" element-loading-text="加载中..." border border-radius
                :summary-method="getSummaries"
                :local-summary-method="getLocalSummaries"
                show-summary
                show-local-summary
                @sort-change="sortChange"
      >
        <el-table-column
          sortable="custom"
          align="center"
          prop="register_date"
          width="170px"
          label="注册时间">
          <template slot-scope="{row}">
            {{row.register_date | toTime}}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="代理账户">
          <template slot-scope="{row}">
            <div class="sub-member__username-column">
              {{row.username}}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="代理层级">
          <template slot-scope="{row}">
            {{row.level | toConverter('PROXY_LEVEL')}}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="所属上级">
          <template slot-scope="{row}">
            {{row.parent_name}}
          </template>
        </el-table-column>

        <el-table-column
          sortable="custom"
          align="center"
          label="下级会员"
        >
          <template slot-scope="{row}">
            {{row.users}}
          </template>
        </el-table-column>

        <el-table-column
          prop="win"
          sortable="custom"
          align="center"
          label="公司输赢"
        >
          <template slot-scope="{row}">
            <money-text :negate="true" :value="row.win"></money-text>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="bonus"
          label="红利"
        >
          <template slot-scope="{row}">
            {{row.bonus | currency}}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="rebate"
          label="返水"
        >
          <template slot-scope="{row}">
            {{row.rebate | currency}}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          width="200"
          v-if="isCreditUpAgent"
        >
          <template slot-scope="{row}" v-if="row.level == 1">
            <!--<el-button-->
              <!--type="link"-->
              <!--size="small"-->
              <!--@click="openDetail(row)"-->
            <!--&gt;-->
              <!--上分详情-->
            <!--</el-button>-->
            <el-button
              type="link"
              size="small"
              @click="openAgentDetail(row)"
            >
              上分详情
            </el-button>
            <el-button
              type="link"
              size="small"
              @click="openCreditUp(row)"
            >
              代理上分设置
            </el-button>
          </template>
        </el-table-column>

        <template slot="empty">
          <div class="el-table__empty">
            <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
            <div class="el-table-text">暂无数据</div>
          </div>
        </template>
      </el-table>
      <div class="el-pagination-container">
        <el-pagination
          bordered
          @size-change="gridSizeChange" @current-change="gridCurrentChange"
          :current-page="filters.page" :page-size="filters.size"
          :total="tableData.total">
        </el-pagination>
        <el-warning>红色负数代表会员盈利，绿色正数代表公司盈利</el-warning>
      </div>
    </custom-container-body>
  </custom-container>
</template>

<script type="text/jsx">

  import {
    lowAgencyListApi as getApi,
  } from '@/services/api/low-level';

  import {grid, pickerOption} from '@/build';

  export default {
    name:'lower-agent',

    mixins: [grid, pickerOption],

    data() {
      return {
        filters: {
          // date: undefined,
          date: [moment(new Date('2018-01-01 00:00:00')).format('YYYY-MM-DD 00:00:00'), moment(new Date()).format('YYYY-MM-DD 23:59:59')],
          username: undefined,
          parentName: undefined,
          status: undefined,
          sort: undefined,
          level: undefined,
          order: undefined,
          page: undefined,
          size: undefined
        },
        currentRow: undefined,
        tableData: {
          list: [],
          total: 0
        },
        statistic: [
          {
            index: 5,
            prop: 'tableData.sum.win',
            format: (value) => {
              return <money-text negate={true} value={value}></money-text>;
            }
          },
          {
            index: 6,
            prop: 'tableData.sum.bonus',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
          {
            index: 7,
            prop: 'tableData.sum.rebate',
            format: (value) => {
              return <div>{_.currency(value)}</div>;
            }
          },
        ],
      }
    },

    methods: {
      openDetail(row) {
        this.$creditUpDetail({
          info: row,
          callback: action => {
            if (action === 'success') {
              this.doGet({action: 'getGrid'});
            }
          }
        });
      },
      openAgentDetail(row) {
        this.$agentDetail({
          info: {
            username: row.username,
            id: row.id,
            row: row,
            filters: this.filters,
          },
          callback: action => {
            if (action === 'success') {
              this.doGet({action: 'getGrid'});
            }
          }
        });
      },
      openCreditUp(row) {
        this.$creditUpAgent({
          info: row,
          callback: action => {
            if (action === 'success') {
              this.doGet({action: 'getGrid'});
            }
          }
        });
      },
      closeDetail() {
        this.detailVisible = false;
        this.$router.push({name: 'lower-level-center'});
      }
    },

    computed: {
      ...mapGetters([
        'isCreditUpAgent'
      ]),
      ...mapState({
        creditStatus: state => state.creditStatus
      }),
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters'
      });

      this.getAll();

      this.$store.dispatch(types.GET_CREDIT_STATUS);

      this.$global.bus.$emit('update:child-count');
    }
  }
</script>

<style lang="scss" scoped>
  @include b(sub-member) {
    @include e(username-column) {
      display: flex;
      align-items: center;
      justify-content: center;
      .svg-icon {
        margin-right: 6px;
      }
    }
    @include e(status-title) {
      height:60px;
      font-size:28px;
      font-weight:bold;
      line-height:60px;
      .svg-icon {
        width:17px;
        height:21px;
        margin-right: 10px;
      }
    }
  }
</style>